<template>
  <div class="common-modal-form-component">
    <a-modal
      :open="open"
      @update:open="updateOpen"
      :title="title"
      :confirm-loading="loading"
      :ok-text="t('common.submit')"
      :cancel-text="t('common.cancel')"
      @ok="handleSubmit"
      @cancel="handleCancel"
      width="600px"
    >
      <a-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item :label="t('dict.type')" name="dictType">
          <a-input v-model:value="form.dictType" disabled />
        </a-form-item>
        <a-form-item :label="t('dict.label')" name="dictLabel">
          <a-input v-model:value="form.dictLabel" :placeholder="t('dict.labelPlaceholder')" />
        </a-form-item>
        <a-form-item :label="t('dict.value')" name="dictValue">
          <a-input v-model:value="form.dictValue" :placeholder="t('dict.valuePlaceholder')" />
        </a-form-item>
        <a-form-item :label="t('dict.sort')" name="dictSort">
          <a-input-number v-model:value="form.dictSort" :min="0" style="width: 100%" />
        </a-form-item>
        <a-form-item :label="t('dict.status')" name="status">
          <a-radio-group v-model:value="form.status">
            <a-radio value="0">{{ t('common.enabled') }}</a-radio>
            <a-radio value="1">{{ t('common.disabled') }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :label="t('dict.cssClass')" name="cssClass">
          <a-input v-model:value="form.cssClass" :placeholder="t('dict.cssClassPlaceholder')" />
        </a-form-item>
        <a-form-item :label="t('common.remark')" name="remark">
          <a-textarea v-model:value="form.remark" :placeholder="t('common.remarkPlaceholder')" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { useDataFormRules } from '../config/formRules'

defineOptions({
  name: 'DataFormModal'
})

// Props定义
const props = withDefaults(defineProps<{
  open: boolean
  title: string
  form: {
    id?: string
    dictType: string
    dictLabel: string
    dictValue: string
    dictSort: number
    status: '0' | '1'
    cssClass?: string
    remark?: string
  }
  loading: boolean
}>(), {
  open: false,
  title: '',
  form: () => ({
    dictType: '',
    dictLabel: '',
    dictValue: '',
    dictSort: 0,
    status: '0'
  }),
  loading: false
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'submit'): void
}>()

// 国际化
const { t } = useI18n()

// 表单实例
const formRef = ref<FormInstance>()

// 表单验证规则
const formRules = useDataFormRules()

// 处理open属性更新
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    emit('submit')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 关闭弹窗
const handleCancel = () => {
  emit('update:open', false)
}

// 监听弹窗关闭
watch(() => props.open, (val) => {
  if (!val) {
    formRef.value?.resetFields()
  }
})

// 导出表单实例
defineExpose({
  formRef
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 